<template>
	<view class="route-box">
		<view class="map-box">
			<view class="map-left-box">
				<view class="item-left-box">
					<view class="common-left-box left-one-box">
						<view class="left-yue">01</view>
						<view class="left-time">2024{{$t('home.H68')}}1{{$t('home.H69')}}</view>
					</view>
					
					<view class="common-left-box left-two-box">
						<view class="left-yue">02</view>
						<view class="left-time">2024{{$t('home.H68')}}4{{$t('home.H69')}}</view>
					</view>
					
					<view class="common-left-box left-three-box">
						<view class="left-yue">03</view>
						<view class="left-time">2024{{$t('home.H68')}}8{{$t('home.H69')}}</view>
					</view>
					
					<view class="common-left-box left-four-box">
						<view class="left-yue">04</view>
						<view class="left-time">2024{{$t('home.H68')}}12{{$t('home.H69')}}</view>
					</view>
					
					<view class="common-left-box left-five-box">
						<view class="left-yue">05</view>
						<view class="left-time">2025{{$t('home.H68')}}5{{$t('home.H69')}}</view>
					</view>
					
					<view class="common-left-box left-six-box">
						<view class="left-yue">06</view>
						<view class="left-time">2025{{$t('home.H68')}}8{{$t('home.H69')}}</view>
					</view>
					
					<view class="common-left-box left-ten-box">
						<view class="left-yue">07</view>
						<view class="left-time">2026{{$t('home.H68')}}</view>
					</view>
				</view>
				<view class="item-right-box">
					<view class="item-right-line"></view>
					<view class="item-cricle cricle-one"></view>
					<view class="item-cricle cricle-two"></view>
					<view class="item-cricle cricle-three"></view>
					<view class="item-cricle cricle-four"></view>
					<view class="item-cricle cricle-five"></view>
					<view class="item-cricle cricle-six"></view>
					<view class="item-cricle cricle-ten"></view>
				</view>
			</view>
			<view class="map-right-box">
				<view :class="['common-box', 'right-one-box', {'right-one-en': isEnLocale}]">{{$t('home.H60')}}</view>
				<view :class="['common-box', 'right-two-box', {'right-one-en': isEnLocale}]">{{$t('home.H62')}}</view>
				<view :class="['common-box', 'right-three-box', {'right-one-en': isEnLocale}]">{{$t('home.H63')}}</view>
				<view :class="['common-box', 'right-two-box', {'right-one-en': isEnLocale}]">{{$t('home.H64')}}</view>
				<view :class="['common-box', 'right-two-box', {'right-one-en': isEnLocale}]">{{$t('home.H65')}}</view>
				<view :class="['common-box', 'right-three-box', {'right-one-en': isEnLocale}]">{{$t('home.H66')}}</view>
				<view :class="['common-box', 'right-four-box', {'right-four-en': isEnLocale}]">{{$t('home.H67')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentLocale: localStorage.getItem('locale'),
			};
		},
		mounted() {
		},
		computed:{
			isEnLocale(){
				console.log(this.currentLocale === 'en');
				return this.currentLocale === 'en';
			},
		},
	}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.route-box {
	width: 100%;
	height: 750px;
	background: url('../../static/hjpImg/routeBack.png');
	background-size: cover;
	position: relative;
	.map-box {
		padding-top: 31px;
		@include size(327px, 657px);
		margin: 0 auto;
		margin-bottom: 42px;
		@include flex-space-between(space-between, center);
		position: relative;
		.map-left-box {
			@include size(100px, 657px);
			@include flex-space-between(space-between, center);
			position: relative;
			.item-left-box {
				@include size(75px, 657px);
				margin-right: 6px;
				position: relative;
				.common-left-box {
					@include size(100%, 64px);
					color: #FFFFFF;
					@include font(14px, 400);
					.left-yue {
						height: 45px;
						@include font(32px, 600);
						color: #6C23E3;
						line-height: 45px;
						margin-left: 33px;
					}
					.left-time {
						width: 100%
					}
				}
				.left-one-box {
					margin-top: 12px;
				}
				.left-two-box {
					margin-top: 32px;
				}
				.left-three-box, .left-six-box {
					margin-top: 35px;
				}
				.left-four-box {
					margin-top: 27px;
				}
				.left-five-box, .left-ten-box {
					margin-top: 34px;
				}
			}
			.item-right-box {
				@include size(16px, 657px);
				position: relative;
				.item-right-line {
					@include size(4px, 630px);
					margin-left: 6px;
					background: #9A66EE;
				}
				.item-cricle {
					@include size(16px, 16px);
					background: #6C23E3;
					border-radius: 50%;
				}
				.cricle-one {
					position: absolute;
					top: 26px;
				}
				.cricle-two {
					position: absolute;
					top: 125px;
				}
				.cricle-three {
					position: absolute;
					top: 223px;
				}
				.cricle-four {
					position: absolute;
					top: 322px;
				}
				.cricle-five {
					position: absolute;
					top: 420px;
				}
				.cricle-six {
					position: absolute;
					top: 519px;
				}
				.cricle-ten {
					position: absolute;
					top: 617px;
				}
			}
		}
		.map-right-box {
			width: 216px;
			margin-left: 14px;
			.common-box {
				@include size(100%, 50px);
				line-height: 25px;
				@include font(18px, 500px);
				color: #FFFFFF;
			}
			.right-one-box {
				margin-top: 23px;
			}
			.right-one-en {
				@include font(14px, 500px);
				@include ellipse(2);
			}
			.right-two-box {
				margin-top: 48px;
			}
			.right-three-box {
				margin-top: 47px;
			}
			.right-four-box {
				height: 25px;
				margin: 48px 0 23px;
			}
			.right-four-en {
				@include font(14px, 500px);
				@include ellipse(1);
			}
		}
	}
}
</style>
